<template>
  <div>
    <el-form
      :model="inputForm"
      size="small"
      ref="inputForm"
      v-loading="loading"
      :class="method === 'view' ? 'readonly' : ''"
      :disabled="method === 'view'"
      label-width="130px"
    >
      <el-row :gutter="15">
        <div class="line-bottom">活动配置</div>
        <el-col :span="24">
          <el-form-item
            label="会员活动名称:"
            prop="activityName"
            :rules="[
              {
                required: true,
                message: '活动名称不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              v-model="inputForm.activityName"
              placeholder="请填写活动名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="活动类型:"
            prop="activityType"
            :rules="[
              {
                required: true,
                message: '活动类型不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              class="width-100"
              size="small"
              v-model="inputForm.activityType"
              placeholder="请选择活动类型"
            >
              <el-option
                v-for="item in activityTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="Number(item.dictKey)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="活动范围:"
            prop="activityRange"
            :rules="[
              {
                required: true,
                message: '活动范围不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              class="width-100"
              size="small"
              v-model="inputForm.activityRange"
              placeholder="请选择活动范围"
            >
              <el-option
                v-for="item in activityRangeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="Number(item.dictKey)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div class="line-bottom">活动规则</div>
        <el-col :span="24">
          <div
            class="haruyuki-width-100"
            style="display: flex; align-items: center"
            v-for="(item, index) in inputForm.amountList"
            :key="index"
          >
            <el-form-item
              label=""
              label-width="80px"
              :prop="'amountList.'+index+'.rechargeAmount'"
              :rules="[
                {
                  required: true,
                  message: '金额不能为空',
                  trigger: 'blur',
                },
              ]"
            >
              <div style="display: flex; align-items: center">
                <span style="width: 60px">充值满</span>
                <el-input
                  class="haruyuki-width-100"
                  placeholder="最低金额1元"
                  v-model="item.rechargeAmount"
                  onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,2})?/)"
                ></el-input>
              </div>
            </el-form-item>
            <div style="margin: 0 10px; margin-bottom: 18px">元，赠送</div>
            <el-form-item
              label=""
              label-width="0"
              :prop="'amountList.'+index+'.rewardAmount'"
              :rules="{
                required: true,
                message: '金额不能为空',
                trigger: 'blur',
              }"
            >
              <el-input
                v-model="item.rewardAmount"
                placeholder="请输入"
                onkeyup="value=value.replace(/[^\d^\.]+/g,'');value=value.toString().match(/^\d+(?:\.\d{0,2})?/)"
              ></el-input>
            </el-form-item>
            <div style="margin-bottom: 18px; margin-left: 8px;margin-right: 6px;">元</div>
            <div
              style="margin-bottom: 18px;margin-left: 6px;margin-right: 6px;"
              v-if="inputForm.amountList.length - 1 == index"
            >
              <el-button
                type="text"
                size="mini"
                @click="() => ladderAppend()"
              >
                新增
              </el-button>
            </div>
            <div
              style="margin-bottom: 18px;margin-left: 6px;"
              v-if="index !== 0"
            >
              <el-button
                type="text"
                size="mini"
                @click="() => ladderRemove(index)"
              >
                删除
              </el-button>
            </div>
          </div>
        </el-col>
        <div class="line-bottom">时效规则</div>
        <el-col :span="24">
          <el-form-item
            prop="timeDate"
            label="有效期"
            :rules="[
              {
                required: true,
                message: '有效期不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-date-picker
              v-model="inputForm.timeDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="timeDateChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item
            label="使用说明:"
            prop="ticketInstructions"
            :rules="[
              {
                required: true,
                message: '使用说明不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              type="textarea"
              v-model="inputForm.ticketInstructions"
              placeholder="请输入使用说明"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <div class="line-bottom">其他信息</div>
        <el-col :span="24">
          <el-form-item
            label="活动状态:"
            prop="activityStatus"
            :rules="[
              {
                required: true,
                message: '活动状态不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-radio-group
              v-model="inputForm.activityStatus"
            >
              <el-radio
                v-for="item in activityStatusList"
                :label="Number(item.dictKey)"
                :key="item.dictKey"
                :disabled="item.disabled"
                :value="Number(item.dictKey)"
                @change="activityStatusRadioChange($event, item)"
                >
                {{ item.dictValue }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="是否支付前弹窗:"
            prop="isPayShow"
            :rules="[
              {
                required: true,
                message: '支付前弹窗不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-radio-group
              v-model="inputForm.isPayShow"
            >
              <el-radio
                v-for="item in isPayShowList"
                :label="Number(item.dictKey)"
                :key="item.dictKey"
                :disabled="item.disabled"
                @change="isPayShowRadioChange($event, item)"
                >
                {{ item.dictValue }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-image-viewer
        style="z-index: 99999"
        v-if="imgShow"
        :on-close="
          () => {
            imgShow = false;
          }
        "
        :url-list="imgUrlList"
      ></el-image-viewer>
      <!-- <avue-crud
        :option="option"
        :search.sync="search"
        :table-loading="loading"
        :data="inputForm.productList"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @sort-change="sortChange"
        @on-load="onLoad"
      >
        <template slot="menuLeft">
        </template>
        <template slot="menuRight">
          <span style="margin-right: 5px" v-if="page.allPrice">
            <span style="color: #999">套餐总金额：</span>
            <span class="redFont">{{ page.allPrice }}元</span>
          </span>
        </template>
      </avue-crud> -->
    </el-form>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { uploadPublic } from "@/api/system/oss";
export default {
  props: {
    inputForm: {
      type: Object,
      default: () => {
        return {
          activityName: "",
          activityRange: 1,
          activityRangeName: "",
          activityStatus: 1,
          activityStatusName: "",
          activityType: 1,
          activityTypeName: "",
          timeDate: [],
          amountList: [
            {
              rechargeAmount: 0,
              rewardAmount: 0,
            },
          ],
          endDate: "",
          id: "",
          isPayShow: 1,
          rechargeQrImg: "",
          rpiNo: "",
          startDate: "",
        };
      },
    },
    method: {
      type: String,
      default: "",
    },
  },
  components: {
  },
  data() {
    return {
      screenWidth: document.documentElement.clientWidth,
      imgShow: false,
      imgUrlList: [],
      logoFileList: [],
      loading: false,
      activityTypeList: [],
      activityRangeList: [],
      isPayShowList: [],
      activityStatusList: [],
      data: [],
      search: {},
      form: {},
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        allPrice: 0,
      },
      props: {
        label: "title",
        value: "key",
      },
      isTicketType: true,
    };
  },
  computed: {
    giveType() {
      let ids = this.inputForm.giveType;
      return ids.join(",");
    },
  },
  watch: {
    method: {
      handler(val) {
        if (val === "view") {
        } else {
        }
      },
      immediate: true,
      // deep: true
    },
    inputForm: {
      handler(val) {
        if (val) {
          this.doGetDicts();
        }
      },
      immediate: true,
      // deep: true
    },
  },
  created() {
    // this.doGetDicts();
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      console.log(this.inputForm.isPayShow);
      console.log(typeof this.inputForm.isPayShow);
      getDictionary({ code: "activity_type" }).then((res) => {
        this.activityTypeList = res.data.data;
      });
      getDictionary({ code: "activity_range" }).then((res) => {
        this.activityRangeList = res.data.data;
      });
      getDictionary({ code: "recharge_status" }).then((res) => {
        this.activityStatusList = res.data.data;
      });
      getDictionary({ code: "is_pay_show" }).then((res) => {
        this.isPayShowList = res.data.data;
      });
      //   this.$nextTick(() => {
      //     if (this.inputForm.startDate && this.inputForm.endDate) {
      //       this.$set(this.inputForm, "timeDate", [
      //         this.inputForm.startDate,
      //         this.inputForm.endDate,
      //       ]);
      //     }
      //     this.$forceUpdate();
      //   });
    },
    timeDateChange(e) {
      this.inputForm.startDate = e[0];
      this.inputForm.endDate = e[1];
    },
    activityStatusRadioChange(e, row) {
    },
    isPayShowRadioChange(e, row) {
    },
    /* 新增阶梯 */
    ladderAppend() {
      let intData = {
        rechargeAmount: 0,
        rewardAmount: 0,
      }
      this.inputForm.amountList.push(intData);
    },
    /* 删除阶梯 */
    ladderRemove(index) {
      this.inputForm.amountList.splice(index, 1);
    },
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    beforeUpload(file) {},
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 上传 */
    httplogoRequest(option) {
      uploadPublic(option.file, option.file.name).then((res) => {
        this.inputForm.logo = res.data.data.link;
        this.$refs.inputForm.validateField("logo");
      });
    },
    /* 删除 */
    logoRemove(file, fileList) {
      this.logoFileList = fileList;
      this.inputForm.logo = "";
    },
    beforelogoRemove() {
      return this.$confirm(`确定移除非法人身份证正面照片？`);
    },
    /**
     * @func 选中单元格
     * @desc 选中单元格数据
     * @param {list} list --- 选中单元格数据-数组
     * */
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    /**
     * @func 分页页码
     * @desc 分页页码改变时会触发
     * */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      // this.refreshChange();
    },
    /**
     * @func 当前页个数
     * @desc pageSize改变时会触发
     * */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      // this.refreshChange();
    },
    /**
     * @func 刷新
     * @desc 点击刷新按钮触发该事件
     * */
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    rowSave(row, done, loading) {
      this.inputForm.productList.push(row);
      setTimeout(() => {
        done();
        this.onLoad(this.page);
      }, 300);
    },
    rowUpdate(row, index, done, loading) {
      this.$nextTick(() => {
        this.inputForm.productList[index] = Object.assign(
          this.inputForm.productList[index],
          {
            ...row,
          }
        );
      });
      setTimeout(() => {
        done();
      }, 300);
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return this.inputForm.productList.splice(row.$index, 1);
        })
        .then(() => {
          this.onLoad(this.page);
        });
    },
    onLoad() {
      this.loading = true;
      let total = 0;
      //   for (const item of this.inputForm.productList) {
      //     total += Number(item.price);
      //   }
      //   this.$nextTick(() => {
      //     this.page.allPrice = Number(total.toFixed(2));
      //   });
      //   this.$forceUpdate();
      setTimeout(() => {
        this.loading = false;
      }, 300);
      //   if (this.awaitData.length > 0) {
      //     //awaitData为全部数据，data是目前表格绑定的数据
      //     this.data = this.awaitData.slice(
      //       (this.page.currentPage - 1) * this.page.pageSize,
      //       this.page.currentPage * this.page.pageSize
      //     );
      //     this.page.total = this.awaitData.length;
      //   }
      //   this.loading = false;
    },
  },
};
</script>

<style scoped>
.line-bottom {
  font-weight: bold;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
}
.redFont {
  color: red;
}
</style>